import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import "./index.scss";

function XzNavigation() {
  // let CustomBar = 0;
  const [Custombar, setCustombar] = useState(0);
  const [systemInfo, setSystemInfo] = useState({ statusBarHeight: 0 });
  useEffect(() => {
    Taro.getSystemInfo({
      success: (e) => {
        const capsule: Taro.getMenuButtonBoundingClientRect.Rect =
          Taro.getMenuButtonBoundingClientRect();
        setSystemInfo(e);
        if (capsule) {
          setCustombar(capsule.bottom + capsule.top - e.statusBarHeight);
        } else {
          setCustombar(e.statusBarHeight + 50);
        }
      },
    });
  }, []);
  return (
    <View className="custombar" style={{ height: Custombar + "px" }}>
      <View
        className="custombar__content"
        style={{
          height: Custombar + "px",
          paddingTop: systemInfo.statusBarHeight + "px",
        }}
      ></View>
    </View>
  );
}

export default XzNavigation;
